<template>
  <el-dialog :title="txtTitle" :close-on-click-modal="false" :visible.sync="visible" class="cu-dialog cu-dialog_center" lock-scroll width="800px">
    <div>
      <div  style="display: flex;
    flex-direction: column;
    align-items: center;">
        <el-button-group>
          <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
          <el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-button-group>
        <div style="marginTop: 10px; color: #409EFF">{{ pageNum }} / {{ pageTotalNum }}</div>
      </div>
      <pdf
        :page="pageNum"
        :src="pdfUrl"
        @progress="loadedRatio = $event"
        @num-pages="pageTotalNum=$event"
      ></pdf>
      <div v-if="loadedRatio < 1">加载进度：{{ loadedRatio * 100 }}%</div>
    </div>
  </el-dialog>
</template>
<script>
export { default } from './index.js'
</script>
<style lang="scss" scoped>
@import url(index.scss);
</style>
